/* 获取天气START */
window.onload = setInterval(function() {
    // 页面加载时执行的代码
    //查询天气
    //城市
    let city = 'NanChang' 
    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=899a6885afbf0702188ef94eb3204236&units=metric&lang=zh_cn`)
    .then(response => {
        //console.log('status:'+response.status);
        // console.log(response.data);
        // document.querySelector('#weather').innerHTML = response.data.weather[0].description
        // document.querySelector('#deg').innerHTML = `风向：${response.data.wind.deg}°`
        // document.querySelector('#speed').innerHTML = `风速：${response.data.wind.speed}/秒`
        // document.querySelector('#gust').innerHTML = `风力等级：${response.data.wind.gust}`
        // document.querySelector('#temp').innerHTML = `温度：${response.data.main.temp}°C`
        // document.querySelector('#humidity').innerHTML = `湿度：${response.data.main.humidity}%`
        // document.querySelector('#visibility').innerHTML = `能见度：≈${response.data.visibility/1000}千米`
        let weather = document.querySelectorAll('#weather')
        let deg = document.querySelectorAll('#deg ')
        let speed = document.querySelectorAll('#speed')
        let gust = document.querySelectorAll('#gust')
        let temp = document.querySelectorAll('#temp')
        let humidity = document.querySelectorAll('#humidity')
        let visibility = document.querySelectorAll('#visibility')
        for (let i = 0;i<weather.length;i++){
            weather[i].innerHTML = response.data.weather[0].description
            deg[i].innerHTML = `风向：${response.data.wind.deg}°`
            speed[i].innerHTML = `风速：${response.data.wind.speed}/秒`
            gust[i].innerHTML = `风力等级：${response.data.wind.gust}`
            temp[i].innerHTML = `温度：${response.data.main.temp}°C`
            humidity[i].innerHTML = `湿度：${response.data.main.humidity}%`
            visibility[i].innerHTML = `能见度：≈${response.data.visibility/1000}千米`
        }
    })
    .catch(error => {
        console.error('Error posting data:', error);
    });
},5000)
/* 获取天气END */

/* 电梯START */
//电梯
let DianTi = document.querySelector('.twg-elevator')
//顶部
let XF_DingBu = document.querySelector('.xf_header')
//轮播图
let silder = document.querySelector('.slider-wrapper')
//景区简介
let jqjj = document.querySelector('.introduction')
//精彩图集
let jctj = document.querySelector('.atlas')
//历史沿革
let lsyg = document.querySelector('.history')
//底部信息
let dbxx = document.querySelector('footer')

//滚动事件
window.addEventListener('scroll', function () {
    //滚动距离
    const n = document.documentElement.scrollTop
    //console.log(n)
    //如果滚动距离大于顶部就显示电梯反之不显示
    DianTi.style.opacity = n >= 83 ? 1 : 0
    DianTi.style.display = n >= 83 ? 'block' : 'none' 
    if (n > 83) {
        XF_DingBu.classList.add('show')
    } else {
        XF_DingBu.classList.remove('show')
    }

    // 当页面滚动的时候，就让小模块的高亮去掉（要写到上面）
    const old = document.querySelector('.twg-elevator-list .active') // 如果没有则返回为 null
    old && old.classList.remove('active')

    //页面滑动来控制小模块高亮效果
    //先遍历所有的大模块
    for (let i = 0; i < bigs.length; i++) {
        //遍历的同时来判断，当前滑动的距离是不是大于等于了当前大模块，然后选出对应的小模块添加高亮
        if (n >= bigs[i].offsetTop - XF_DingBu.offsetHeight) {
              // console.log(smalls[i])
              const old = document.querySelector('.twg-elevator-list .active') // 如果没有则返回为 null
              old && old.classList.remove('active')
              smalls[i].classList.add('active')
        }
    }
})


//点击返回按钮返回顶部
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
    //让html元素的 scrollTop 值修改为 0
    document.documentElement.scrollTop = 0
})


//点击高亮
//利用循环给小模块注册点击事件
const smalls = document.querySelectorAll('.small')
const bigs = document.querySelectorAll('.big')
    for (let i = 0; i < smalls.length; i++) {
        smalls[i].addEventListener('click', function () {
          // 利用排他思想实现高亮效果
          // 移除上一个小模块的active
          // 注意，刚开始没有链接带有active这个类，所以我们不能移除掉，否则报错
          // 如果有active这个类，我就移除，没有这个类，则不需要移除
          const old = document.querySelector('.twg-elevator-list .active') // 如果没有则返回为 null
          console.log(old)
          // document.querySelector('.twg-elevator-list .active').classList.remove('active')
          // 利用逻辑与中断
          old && old.classList.remove('active')
          this.classList.add('active')

          // 页面滑动到对应大模块
          // document.documentElement.scrollTop = 对应大模块的offsetTop
          // console.log(bigs[i])
          // console.log(sticky.offsetHeight)
          document.documentElement.scrollTop = bigs[i].offsetTop - XF_DingBu.offsetHeight
        })
    }
/* 电梯END */
